<template>
    <div class="box_bg">
        <h2 class="box_tit">
            <i class="icon icon1"></i>机构管理/添加用户
            <i class="reti"></i>
        </h2>
        <!-- <div class="blank20"></div> -->
        <div class="orguser">
            <!-- 搜索******开始 -->
            <div class="search_box">
                <ul>
                    <li>
                        <span class="tit">帐户名 ：</span>
                        <input type="text" placeholder="请输入帐户名" v-model="searchList.nickName">
                    </li>
                    <li>
                        <span class="tit">用户名 ：</span>
                        <input type="text" placeholder="请输入用户名" v-model="searchList.userName">
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="btns search" @click="getUser()">搜索</a>
                    </li>
                </ul>
            </div>
            <!-- 搜索******结束 -->
            <!-- 表格******开始 -->
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>组别</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="trData in UserTableList" :key="trData.id" >
                        <td>{{trData.name}}</td>
                        <td>{{trData.professionGroup}}</td>
                        <td>{{trData.sex}}</td>
                        <td style="width:150px;">
                            <a href="JavaScript:void(0);" class="text_link" @click="addUser(trData,$event)">添加</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p v-show="UserTableList == null" class="flg">奥！没有符合条件的人员</p>
            <!-- 表格******结束 -->
            <!-- 页码 -->
            <div class="paginationBox">
                <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page.sync="page.currentPage"
                  :page-sizes="[30,50,100,200]"
                  :page-size="page.visiblePages"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.totalPages">
                </el-pagination>
            </div>
            <!-- 已添加人员展示****开始 -->
            <div class="chooseList">
                <h5>已添加人员</h5>
                <ul>
                    <li v-for="item in addList" :key='item.id'>
                        <!-- {{item}} -->
                        {{item.name}}
                        {{item.professionGroup}}
                        <a href="javascript:void(0);" class="del" @click="del(item.id)">删除</a>
                    </li>
                </ul>
            </div>
            <!-- 已添加人员展示****结束 -->
            <div class="btn_box">
                <a href="javascript:void(0);" class="btns" @click="enSure">确定</a>
            </div>
        </div>
    </div>
</template>
<script>
import {userListUrl,officesUserUrl} from '../../../axios/api.js'
export default {
    data() {
    return {
        UserTableList:null,
        searchList:{
            "nickName":'',
            "userName":'',
            "pageNum":1,
            "pageSize":30
        },
        page: { // page组件需要数据
            totalPages: null,
            visiblePages: 30,
            currentPage: 1
        },
        addList:[],
        lastList:[]
    };
    },
    created() {

    },
    mounted() {
        this.getUser();
    },
    methods: {
        // 每页多少条
        handleSizeChange(val) {
            if(isNaN(val)){
                val = 30;
            }
            this.page.pageSize = val;
        },
        handleCurrentChange(val) {
            if(val < 1){
                val = 1;
            }
            this.page.currentPage = val;
        },
        // 获取人员信息
        getUser(){
            let self = this;
            let referToData = ''
            //判断上传数据
            if(self.searchList.nickName =='' || self.searchList.nickName == null){
                referToData = "/?username="+self.searchList.userName+"&pageSize="+self.searchList.pageSize+"&pageNum="+self.searchList.pageNum
            }else if(self.searchList.userName =='' || self.searchList.userName == null){
                referToData = "/?nickName="+self.searchList.nickName+"&pageSize="+self.searchList.pageSize+"&pageNum="+self.searchList.pageNum
            }else if((self.searchList.nickName =='' || self.searchList.nickName == null) && (self.searchList.userName =='' || self.searchList.userName == null)){
                referToData = "/?&pageSize="+self.searchList.pageSize+"&pageNum="+self.searchList.pageNum
            }
            //  发送请求
            self.axios({
                method: "get",
                url: userListUrl + referToData,
                params: {
                    "pageNum": self.page.currentPage,
                    "pageSize": self.page.visiblePages
                }
            })
            .then(function(response) {
                console.log("self.UserTableList");
                console.log(response.data.data);
                self.UserTableList = response.data.data.list;
                self.page.totalPages = response.data.data.total;
            })
            .catch(function(err) {
                console.log(err);
            });
        },
        //添加用户到用户列表
        addUser(userInf,event){
            userInf.eventDom = event;
            this.addList.unshift(userInf);
            // 传输数据
            this.lastList.push({
                "officeId":this.$route.query.officeId,
                "userId":userInf.id,
            })
            // 按钮不可重复提交
            $(event.target).attr("disabled",true)
        },
        //删除已添加的用户
        del(Id){
            let self = this;

            for (var i = 0; i < self.addList.length; i++) {
                if(self.addList[i].id == Id){

                    $(self.addList[i].eventDom.target).attr("disabled",false)
                    self.addList.splice(i,1);
                    self.lastList.splice(i,1);
                }
            };
        },
        // 点击确定提交
        enSure(){
            let self = this;
            // 非空判断
            if(self.lastList.length == 0){
                self.$message({
                    duration:2000,
                    message: "对不起，还没有选择要添加的用户！",
                    center: true,
                    type:'error'
                });
                return
            }
            self.axios({
                method: "post",
                url: officesUserUrl,
                data:{
                    'users':self.lastList
                }
            })
            .then(function(response) {
                if(response.data.success){
                    self.$message({
                        duration:1000,
                        message: '添加机构成功！',
                        center: true,
                        type: 'success',
                        onClose: function(){
                            self.$router.push('/systems/organize');
                        }
                    });

                }else{
                    self.$message({
                        duration:1000,
                        message: response.data.msg,
                        center: true,
                        type:'error'
                    });
                }
            })
            .catch(function(err) {
                self.$message({
                    duration:1000,
                    message: "奥!出错了，请重新操作！",
                    center: true,
                    type:'error'
                });
            });

        }
    }
};
</script>
<style scoped>
    table,
    tr,
    td {
      border: 1px solid #dadada;
      color: #666;
    }
    table {
      width: 100%;
      margin: 0 auto;
      margin-top: 30px;
      border-radius: 6px;
    }
    td {
      text-align: center;
      vertical-align: middle;
      padding: 5px;
    }
    thead th {
      text-align: center;
      padding: 5px;
      font-weight: bold;
      background: #fbfbfb;
    }
    .flg{ text-align: center; }
    .search_box{
        overflow: hidden;
    }
    .search_box li{
        float: left;
        margin-right: 30px;
    }
     input:disabled{
        /* color: #666666; */
        background: #CCC;
    }
    .chooseList {
        margin-top: 20px;
    }
    .chooseList h5{
        font-weight: bold;
        margin-bottom: 5px;
    }
    .chooseList ul{
        padding-left: 20px;
    }
    .btn_box{
        width: 100%;
        padding-top: 20px;
        text-align: center;
    }
    .text_link{
        color: #00bbbd;
    }
</style>